import Vue from 'vue'
import {getOneCar,getOneCarAns} from "@/api/cars";
import {VImg,VCard,VCardTitle,VIcon,VBtn,VSlideGroup,VSlideItem} from 'vuetify/lib'

interface IData {
    carId: string;
    carInfo: ICarInfo | null;
}
interface ICarInfo {
    cDesc: string;
    cInner: Array<any>;
    cName: string;
    cPic: string;
    cPower: string;
    cPrice: string;
    carId: string;
    cfuel: string;
    clevel: string;
    couter: Array<any>;
    ctext: string;
    venderId: number

}
export default Vue.extend({
    name: 'CDetail',
    data: ():IData => ({
        carId: '',
        carInfo: null
    }),
    components: {
        'v-img':VImg,
        'v-card': VCard,
        'v-card-title': VCardTitle,
        'v-icon': VIcon,
        'v-btn': VBtn,
        'v-slide-group': VSlideGroup,
        'v-slide-item': VSlideItem
    },
    methods: {
        goBack(){
            this.$router.go(-1)
        }
    },
    mounted() {
        window.scrollTo(0,0)
        this.carId = (this.$route.query.carId) as string
        if(this.carId){
            getOneCar(this.carId)
                .then(res => {
                    const {code,msg,data} = res as unknown as getOneCarAns
                    if(code === 200){
                        this.carInfo = (data) as ICarInfo
                    }else{
                        console.log(msg)
                    }
                })
        }
    },
    render(){
        return (
            <div style={{backgroundImage: 'linear-gradient(to top, #a8edea 0%, #fed6e3 100%)'}}>
                <div style={{padding: '2vh 2vw'}}>
                    <v-btn outlined={true} onclick={this.goBack} style={{marginBottom: '2vh'}} block={true}>
                        <v-icon drak={true}>
                            mdi-arrow-left
                        </v-icon>
                    </v-btn>
                <v-card style={{backgroundImage: 'linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%)'}}>
                    <v-img src={this.carInfo?.cPic}/>
                    <v-card-title>
                        <div style={{width: '100%',textAlign: 'center',fontWeight: 'bold',fontSize: '6vw'}}>{this.carInfo?.cName}</div>
                        <div style={{width: '100%',textAlign: 'center',fontSize: '4vw',color: '#999'}}>{this.carInfo?.cDesc}</div>
                        <div style={{width: '100%',textAlign: 'center',fontSize: '4vw'}}>厂商指导价:<span style={{color: 'red'}}>{this.carInfo?.cPrice}</span>万起</div>
                        <div style={{width: '100%',fontSize: '4.5vw'}}>部分参数:</div>
                        <div style={{paddingBottom: '1vh',width: '100%',display: 'flex',flexFlow: 'row nowrap',justifyContent: 'space-around',fontSize: '4vw',borderBottom: '1px solid #999'}}>
                            <div>排量:{this.carInfo?.cPower}</div>
                            <div>油耗:{this.carInfo?.cfuel}</div>
                            <div>车型:{this.carInfo?.clevel}</div>
                        </div>
                        <div style={{width: '100%',fontSize: '4vw',textIndent: '2rem',paddingTop: '1vh'}}>
                            {this.carInfo?.ctext}
                        </div>
                    </v-card-title>
                </v-card>
                </div>
                <div style={{padding: '1.5vh 5vw'}}>
                    <div style={{marginBottom: '1.5vh',fontSize: '5vw'}}>Show</div>
                    <hr/>
                </div>
                <v-slide-group show-arrows={true}>
                {
                    this.carInfo?.couter?.map((item,index) => {
                        return (
                            <v-slide-item key={index}>
                            <v-img src={item} contain={true} style={{width: '150vw',display: 'block',margin: '2vw'}}/>
                            </v-slide-item>
                        )
                    })
                }
                </v-slide-group>
                <v-slide-group show-arrows={true}>
                {
                    this.carInfo?.cInner?.map((item,index) => {
                        return (
                            <v-slide-item key={index}>
                            <v-img src={item} contain={true} style={{width: '150vw',height: '40vh',display: 'block',margin: '2vw'}}/>
                            </v-slide-item>
                        )
                    })
                }
                </v-slide-group>
            </div>
        )
    }
})